import React, { Component } from 'react';
import { AlertOutlined } from '@ant-design/icons';
import AutoTable from '@/components/AutoTable';
import moment from 'moment';
import IconFont from '@/components/IconFont';
import { useRequest } from 'ahooks';
import { getFetch } from '@/utils/doFetch';

function PowerError() {
  let res = useRequest(() => {
    return getFetch({ url: '/vehicle-api/monitor/charge_error_list', params: {} });
  });
  return (
    <div>
      <p className="title" style={{ marginBottom: 24 }}>
        <span>
          <AlertOutlined style={{ paddingRight: 6 }} />
          充电异常告警
        </span>
      </p>
      <AutoTable
        dataSource={res?.data?.data}
        rowClassName={(record, index) => {
          let className = index % 2 ? 'shallow_gray' : 'deep_gray';
          return className;
        }}
        columns={[
          {
            title: '设备号',
            dataIndex: 'code',
            key: 'code',
            search: false,
          },
          {
            title: '最近联网时间',
            dataIndex: 'newTime',
            key: 'newTime',
            search: false,
          },
          {
            title: '异常端口号',
            dataIndex: 'portIndex',
            key: 'portIndex',
            search: false,
          },
          {
            title: '设备端口数',
            dataIndex: 'number',
            key: 'number',
            search: false,
          },
          {
            title: '充电异常信息',
            dataIndex: 'error_message',
            key: 'error_message',
            search: false,
          },
        ]}
        bordered={false}
        withCard={false}
        style={{ height: 'auto' }}
        onlyTable={true}
      />
    </div>
  );
}

export default PowerError;
